import {
  Component, OnInit, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, QueryList,
  ViewChildren, ElementRef, Renderer2, Inject
} from '@angular/core';
import {TabModal} from "@shared/components/tab/tab/tab.modal";
import {ImageServeService} from "@shared/service/image/image-serve.service";
import {Title} from "@angular/platform-browser";

import {PlanService} from "@train/plan/plan.service";
import {ActivatedRoute, Params} from "@angular/router";
import {ToolsService} from "@shared/service/tools/tools.service";
import {TrainClassDrillOutline, TrainClassroomScheme, TrainClassScheduleVO} from "@interface/index";



@Component({
  selector: 'seed-plan',
  templateUrl: './plan.component.html',
  styleUrls: ['./plan.component.scss'],
  host: {'id': 'seed-class-plan'},
  encapsulation: ViewEncapsulation.None,
})
export class PlanComponent implements OnInit {
  public tabs: Array<TabModal>;
  public classId: number;
  public className: string;
  public teachScheme: TrainClassDrillOutline;
  public classSchedule: Array<TrainClassScheduleVO>;
  constructor(
    private _imgService: ImageServeService,
    private _titleService: Title,
    private _palnService: PlanService,
    private _route: ActivatedRoute,
    public toolService: ToolsService
  ) {
    this.tabs = [
      // {title: '学情分析', content: '暂无内容', tag: 'analysis', isShow: false, hasExtend: false, shortContent: ''},
      {title: '教学目标', content: '暂无内容', tag: 'objective', isShow: false, hasExtend: false, shortContent: ''}
      // {title: '教学措施', content: '暂无内容', tag: 'measure', isShow: false, hasExtend: false, shortContent: ''}
    ];
    this._route.params
      .switchMap((params: Params) => {
        this.classId = params['classId'];
        return this._route.queryParams;
      }).subscribe((params: Params) => {
      this.className = params['className'];
      this.fetchTeachScheme(this.classId);
      this.fetchClassroomSchedule(this.classId);
    });

  }

  getIcon(name: string): string {
    return this._imgService.getIcon(name);
  }

  /**
   * @description
   * 根据班级ID获取教学计划
   * @author @chenwh576
   * @time 2018.01.02
   * @param {number} classId
   */
  fetchTeachScheme(classId: number) {
    this._palnService.fetchDrilloutline(classId)
      .subscribe(res => {
        if(res.data){
          this.teachScheme = res.data;
          const keys = Object.keys(this.teachScheme);
          this.tabs.forEach((item, index) => {
            keys.map((objective, subindex) => {
              if (this.teachScheme[objective] !== '' && Object.is(objective, item['tag'])) {
                item.content = this.teachScheme[objective];
              }
            });
          });
          this.tabContentHandler();
        }
      });
  }

  /**
   * @description
   * 根据班级ID获取 班级课时列表
   * @author @chenwh576
   * @time 2018.01.02
   * @param {number} classId
   * @return {Observable<SNSResult<TrainClassroomScheme>>}
   */
  fetchClassroomSchedule(classId: number): void {
    classId && this._palnService.fetchClassroomSchedule(this.classId)
      .subscribe(res => {
        this.classSchedule = [...res.data];
      });
  }
  /*
   * 切换tab 的显示全部与否
   */
  tabContentSwitch(i: number) {
    this.tabs[i].isShow = !this.tabs[i].isShow;
  }

  /**
   * 判断 顶部tab 是否需要展开收起功能
   */
  tabContentHandler() {
    const tabs = this.tabs;
    for (let i = 0; i < 1; i++) {
      if (tabs[i].content.length > 110) {
        tabs[i].shortContent = tabs[i].content.slice(0, 111) + '...';
        tabs[i].hasExtend = true;
      }
    }
    this.tabs = tabs;
  }
  ngOnInit() {
  }

}
